<template>
      <div>
            <!-- 面包屑导航 -->
            <breadcrumb first="用户管理" second="角色列表"></breadcrumb>
            <!-- 卡片 -->
            <el-card class="box-card">
                  <!-- 添加角色按钮 -->
                  <el-button type="primary" class="addRole">添加角色</el-button>

                  <!-- 角色表格 -->
                  <el-table :data="rolesList" border>
                        <el-table-column type="expand"  width="40">
                              <template slot-scope="scope">
                                    <!-- 一级渲染 -->
                                    <el-row v-for="(item1) in scope.row.children"
                                          :key="item1.id"
                                          class="border-top">
                                          <el-col :span="5">
                                                <el-tag closable
                                                      @close="removeRightsById(scope.row, item3.id)">
                                                      {{item1.authName}}
                                                </el-tag>
                                                <i class="el-icon-caret-right"></i>
                                          </el-col>
                                          <!-- 二级、三级渲染 -->
                                          <el-col :span="19">
                                                <!-- 二级渲染 -->
                                                <el-row v-for="(item2, i2) in item1.children" 
                                                      :key="item2.id" 
                                                      :class="i2 === 0 ? '' : 'border-top'">
                                                      <el-col :span="6">
                                                            <el-tag type="success" closable
                                                                  @close="removeRightsById(scope.row, item1.id)">
                                                                  {{item2.authName}}
                                                            </el-tag>
                                                            <i class="el-icon-caret-right"></i>

                                                      </el-col>
                                                      <!-- 三级渲染 -->
                                                      <el-col :span="18" >
                                                            <el-tag closable type="warning" 
                                                                  v-for="item3 in item2.children" 
                                                                  :key="item3.id"
                                                                  @close="removeRightsById(scope.row, item3.id)">
                                                                  {{item3.authName}}
                                                            </el-tag>
                                                      </el-col>
                                                </el-row>
                                          </el-col>
                                    </el-row>
                              </template>
                        </el-table-column>
                        <el-table-column type="index"  width="40"></el-table-column>
                        <el-table-column prop="roleName" label="角色名称" min-width="120"></el-table-column>
                        <el-table-column prop="roleDesc" label="角色描述" min-width="120"></el-table-column>
                        <el-table-column label="操作" min-width="300">
                              <template slot-scope="scope">
                                    <el-button size="mini" type="primary" @click="showEditDialog(scope.row.id)">
                                          <i class="el-icon-edit"></i>编辑
                                    </el-button>
                                    <el-button size="mini" type="danger" @click="showDeleteDialog(scope.row.id)">
                                          <i class="el-icon-delete"></i>删除
                                    </el-button>
                                    <el-button size="mini" type="warning" @click="showSetRightsDialog(scope.row)">
                                          <i class="el-icon-s-tools"></i>分配权限
                                    </el-button>
                              </template>
                        </el-table-column>
                  </el-table>

                  <!-- 删除权限对话框 -->
                  <el-dialog title="删除权限"
                        :visible.sync="dialogVisible"
                        width="35%"
                        @close="beforeClose">
                        <!-- 表单主体 -->
                        <span>此操作将永久删除该用户，是否继续？</span>
                        <!-- 表单footer -->
                        <span slot="footer">
                              <el-button @click="dialogVisible = false">取 消</el-button>
                              <el-button type="primary" @click="deleteRights()">确 定</el-button>
                        </span>
                  </el-dialog>

                  <!-- 设置权限对话框 -->
                  <el-dialog title="设置权限"
                        :visible.sync="setRightsDialogVisible"
                        width="50%">
                        <!-- 表单主体 -->
                        
                        <div class="setRights">
                              <el-tree :data="rightsTree" 
                              :props="rightsProps" 
                              ref="tree"
                              show-checkbox
                              node-key="id"
                              default-expand-all
                              :default-checked-keys="defaultKeys"></el-tree>
                        </div>

                        <!-- 表单footer -->
                        <span slot="footer">
                              <el-button @click="setRightsDialogVisible = false">取 消</el-button>
                              <el-button type="primary" @click="setRights()">确 定</el-button>
                        </span>
                  </el-dialog>
            </el-card>
      </div>
</template>

<script>
import BreadCrumb from './breadcrumb'
export default {
      components: {
            breadcrumb: BreadCrumb
      },

      data(){
            return {
                  rolesList: [],
                  dialogVisible: false,
                  deleteRole: {},
                  deleteRightsId: '',
                  setRightsDialogVisible: false,      //分配权限对话框是否显示
                  setRightsRole: {   //设置权限的角色
                        children: []
                  }, 
                  rightsTree: [],   //权限列表
                  rightsProps: {    //树形结构属性绑定
                        label: 'authName',
                        children: 'children'
                  },
            }
      },

      created(){
            this.getRolesList();
      },

      computed: {
            defaultKeys(){
                  var arr = [];
                  this.setRightsRole.children.forEach( item1 => {
                        if( item1.children && item1.children.length ){
                              item1.children.forEach( item2 => {
                                    arr.push(item2.id);
                              })
                        }
                  });
                  return arr;
            }
      },

      methods: {
            //获取角色列表
            async getRolesList(){
                  const {data: res} = await this.$http.get('/roles');
                  if(res.meta.status !== 200)   return this.$message.error('获取用户信息失败');
                  this.rolesList = res.data;
            },
            //根据id删除权限
            removeRightsById(role, rightsId){
                  this.deleteRole = role;
                  this.deleteRightsId = rightsId;
                  this.dialogVisible = true;
            },
            //关闭弹框前将数据修改为初始值
            beforeClose(){
                  this.deleteRole = {};
                  this.deleteRightsId = '';
            },
            //删除权限
            async deleteRights(){
                  const {data: res} = await this.$http.delete(`/roles/${this.deleteRole.id}/rights/${this.deleteRightsId}`);
                  this.dialogVisible = false;
                  if(res.meta.status !== 200)   return this.$message.error(res.meta.msg);
                  this.deleteRole.children = res.data;
                  return this.$message.success(res.meta.msg);
            },
            //展示设置权限对话框
            async showSetRightsDialog(role){
                  const {data: res} = await this.$http.get('/rights/tree');
                  if(res.meta.status !== 200)   return this.$message.error(res.meta.msg);
                  this.setRightsRole = role;
                  this.setRightsDialogVisible = true;
                  this.rightsTree = res.data;
            },
            //修改权限
            async setRights(){
                  const arr = [...this.$refs.tree.getCheckedKeys(), ...this.$refs.tree.getHalfCheckedKeys()]
                  const {data: res} = await this.$http.post('/roles/'+this.setRightsRole.id+'/rights', {rids: arr.join(',')} );
                  this.setRightsDialogVisible = false;
                  if(res.meta.status !== 200){
                        return this.$message.error(res.meta.msg);
                  }else{
                        this.getRolesList();
                        return this.$message.success(res.meta.msg);
                  }
            }
      }
}
</script>

<style scoped>
.addRole{
      margin-bottom: 15px;
}
.el-row{
      display: flex !important;
      align-items: center !important;
}
.el-tag{
      margin: 5px;
}
.border-top{
      border-top: 1px solid #ccc;
}
.setRights{
      height: 300px;
      overflow: scroll;
}
</style>